<div class="bg_black">
            <ul class="page_black_tabs">
                <li v-for="(item,index) in pageTabs" :class="pagetabsIndex == index?'hover':''" @click="clickPageTabs(index)">{{ item }}</li>
            </ul>
    
            <div class="split_screen">
                <div class="name">分屏</div>
                <img :class="videoListData == 4?'hover':''" @click="videoListData = 4" src="../../assets/img/ico_21.png" alt="">
                <img :class="videoListData == 6?'hover':''" @click="videoListData = 6" src="../../assets/img/ico_22.png" alt="">
                <img :class="videoListData == 9?'hover':''" @click="videoListData = 9" src="../../assets/img/ico_23.png" alt="">
            </div> 
    
            <ul class="video_list">
                <li :class="videoListData == 9?'nine':''" v-for="(item,index) in videoListData" @click="gotoVideoInfo()">
                    <img src="../../assets/img/1.jpg" alt="">
                    <p>CAM01   09/09/2023  星期一  13:23:41</p>
                </li>
            </ul>
        </div>
    <style >
    .video_list{
        margin: 3px 20px 20px;
        background: #45424A;
        padding:15px 15px 0;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        flex-wrap: wrap;
        li{
            width: 49.2%;
            position: relative;
            margin-bottom: 15px;
            &.nine{
                width: 32.333%;
            }
            p{
                position: absolute;
                left:0;
                top:0;
                right: 0;
                color:#fff;
                font-size: 15px;
                line-height: 30px;
                padding:0 20px;
                background: rgba(0,0,0,0.4);
            }
            img{
                width: 100%;
                height: 360px;
                object-fit: cover;
            }
        }
    }
    .split_screen{
        display: flex;
        align-items: center;
        margin: 20px 20px 0;
        background: #45424A;
        height: 40px;
        .name{
            flex-shrink: 0;
            font-size: 16px;
            color: #FFFFFF;
            padding:0 15px;
        }
        img{
            flex-shrink: 0;
            margin-right: 20px;
            cursor: pointer;
            opacity: 0.5;
            &.hover{
                opacity: 1;
            }
        }
    }
    </style>